<!-- 
  下面是父组件html中的代码和参数详解：
  sendfater是接收子组件传递的表单数据的自定义事件
 -->
<!-- 
  <Add_com v-model="dialogVisible" @sendfater="getchild"></Add_com>
  <el-button plain @click="dialogVisible = true">
    添加按钮
  </el-button>
 -->

<!-- 下面是父组件中的js代码 -->
<!-- 
    const dialogVisible = ref(false)
    // 接收子组件传递的表单数据
    const getchild=(value)=>{
        console.log(value);
    }
 -->
<template>
    <el-dialog :model-value="modelValue" title="添加客户" label-width="auto" width="600" :before-close="handleClose">
        <span>
            <el-form :model="formInline" label-width="auto">
                <el-form-item label="姓氏">
                    <el-input v-model="formInline.surname" placeholder="请输入客户姓氏" clearable />
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="formInline.name" placeholder="请输入客户名称" clearable />
                </el-form-item>

                <el-form-item label="会员等级">
                    <el-select v-model="formInline.region" placeholder="选择用户的会员等级" clearable>
                        <el-option label="普通会员" value="普通会员" />
                        <el-option label="黄金会员" value="黄金会员" />
                        <el-option label="白金会员" value="白金会员" />
                        <el-option label="钻石会员" value="钻石会员" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="formInline.notes" placeholder="请输入备注" clearable />
                </el-form-item>
            </el-form>
        </span>
        <template #footer>
            <div class="dialog-footer" center>
                <el-button @click="emits('update:modelValue',false)" style="background-color: #F5F5F5;width: 7vw;">取消</el-button>
                <el-button @click="addhy" style="background-color: #025CCA;color:white;width: 7vw;">
                    添加
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { reactive } from 'vue'
import { ElMessageBox } from 'element-plus'

// 接收父组件传递的数据
const emits = defineEmits(['update:modelValue','sendfater'])
defineProps({
    conText: {
        type: String,
        default: '您确定要删除此客户数据吗？'
    },
    title: {
        type: String,
        default: '删除客户'
    },
    id: {
        type: Number,
        required: true,  //设置必传
    },
    modelValue: Boolean,
})
// 绑定表单的值
const formInline = reactive({
    surname:'',
    name: '',
    region: '',
    notes: '',
})
// 点击添加按钮，把数据发送给父组件
const addhy=()=>{
    emits('sendfater',formInline)
    emits('update:modelValue',false)
    formInline.surname=''
    formInline.name=''
    formInline.region=''
    formInline.notes=''

}
// 点击关闭对话框按钮
const handleClose = (done: () => void) => {
    emits('update:modelValue',false)
    done()
}
</script>
<style lang="less" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.dialog-footer {
  text-align: center
}
</style>